<template>
    <div class="white-box" style="padding-bottom: 1px" v-loading="loading">
        <title-more title="基本信息" />
        <div class="od-one">
            <div class="od-one__item">
                <detail-item title="商品ID" one-value bottom="16px" :value="objs.product_id" />
                <detail-item title="商品价格" one-value bottom="16px" :value="objs.product_price || ''" />
                <detail-item title="商品分类" one-value bottom="16px" :value="objs.cate_title" />
                <detail-item title="商品等级" one-value bottom="16px" :value="objs.level" />
                <detail-item title="商品库存" one-value bottom="16px" :value="objs.sku" />
                <detail-item title="商品体积" one-value bottom="16px" :value="objs.volume ? objs.volume + 'm³' : ''" />
            </div>
            <div class="od-one__item">
                <detail-item title="公共商品ID" one-value bottom="16px" :value="objs.product_common_id" />
                <detail-item title="供应价" one-value bottom="16px" :value="objs.cost_price" />
                <detail-item title="颜色分类" one-value bottom="16px" :value="objs.color" />
                <detail-item title="商品编码" one-value bottom="16px" :value="objs.sku_code || ''" />
                <detail-item title="商品销量" one-value bottom="16px" :value="objs.sales || ''" />
                <detail-item title="添加时间" one-value bottom="16px" :value="objs.created_at_label" />
            </div>
            <div class="od-one__item">
                <detail-item title="商品名称" one-value bottom="16px" :value="objs.product_name" />
                <detail-item title="商品规格" one-value bottom="16px" :value="objs.norm ? objs.norm + '/' + objs.unit : ''" />
                <detail-item
                    title="标签名称"
                    one-value
                    bottom="16px"
                    :value="objs.product_label.label_name"
                    v-if="objs.label_id > 0 && objs?.product_label?.hidden == 0"
                />
                <detail-item title="商品重量" one-value bottom="16px" :value="objs.weight ? objs.weight + 'Kg' : ''" />
                <detail-item title="商品关键词" one-value bottom="16px" :value="objs.keywords" />
                <detail-item title="更新时间" one-value bottom="16px" :value="objs.updated_at_label" />
            </div>
        </div>
    </div>
    <div class="white-box" v-if="objs.have_discount == 1">
        <title-more title="会员等级价格" />
        <detail-item :title="item.level_name" bottom="16px" :value="item.discount + '元'" v-for="item in objs.user_grade" :key="item.grade_id" />
    </div>
    <div class="white-box">
        <title-more title="图片/视频" />
        <detail-item title="商品封面图" bottom="16px">
            <div class="img-selects">
                <el-image
                    class="img-selects__pic"
                    :src="proxy.imgUrl + objs.product_img + '!img_400'"
                    :preview-src-list="srcGoodList"
                    fit="cover"
                    v-if="objs.product_img"
                />
            </div>
        </detail-item>
        <detail-item title="商品主图" bottom="16px">
            <div class="img-list" v-if="objs.have_photo == 1">
                <div class="img-selects" v-for="(item, index) in objs.photo_list" :key="item.photo_id">
                    <el-image
                        class="img-selects__pic"
                        :src="proxy.imgUrl + item.photo + '!img_400'"
                        :preview-src-list="srcList"
                        :initial-index="index"
                        fit="cover"
                        v-if="item.photo"
                    />
                </div>
            </div>
        </detail-item>
        <detail-item title="商品视频" bottom="16px" v-if="objs.have_video == 1">
            <video :src="proxy.imgUrl + objs.video" controls controlsList="nodownload"></video>
        </detail-item>
    </div>
    <div class="white-box" v-if="objs.have_attr == 1">
        <title-more title="商品属性" />
        <detail-item :title="item.attr_name" bottom="16px" :value="item.attr_value[0].attr_value_name" v-for="item in objs.attr_list" :key="item.attr_name" />
    </div>
    <div class="white-box">
        <title-more title="商品返佣" />
        <detail-item title="是否开启返佣" one-value bottom="16px" :value="objs.agent_type == 0 ? '否' : '是'" value-color="#4B93FA" />
        <detail-item title="大团长返佣比例" one-value bottom="16px" :value="objs.one_award ? objs.one_award + '%' : ''" />
        <detail-item title="中团长返佣比例" one-value bottom="16px" :value="objs.two_award ? objs.two_award + '%' : ''" />
        <detail-item title="小团长返佣比例" one-value bottom="16px" :value="objs.three_award ? objs.three_award + '%' : ''" />
        <detail-item title="各平级返佣比例" one-value bottom="16px" :value="objs.level_award ? objs.level_award + '%' : ''" />
        <detail-item title="越级返佣比例" one-value bottom="16px" :value="objs.leapfrog_award ? objs.leapfrog_award + '%' : ''" />
    </div>
    <div class="white-box" v-if="objs.content">
        <title-more title="商品详情" />
        <div class="xq-content" v-html="objs.content"></div>
    </div>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import DetailItem from "@components/DetailItem.vue"
import TitleMore from "@components/title-more.vue"
import GoBack from "@components/GoBack.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

let gid = route.query.gid || ""
onMounted(() => {
    gid && getDetail()
})

const loading = ref(true)
const objs = ref({})
const srcList = ref([])
const srcGoodList = ref([])
function getDetail() {
    proxy.$axios
        .get("product/detail", {
            params: {
                product_id: gid,
            },
        })
        .then((res) => {
            loading.value = false
            if (res.data.code == 0) {
                let result = res.data.data
                // 图片主图
                let arrs = []
                if (result.have_photo == 1) {
                    result.photo_list.forEach((item) => {
                        arrs.push(proxy.imgUrl + item.photo)
                    })
                }
                srcGoodList.value.push(proxy.imgUrl + result.product_img)
                srcList.value = arrs
                result.content = result.content.replace(/<img [^>]*src=['"]/g, `<img src="${proxy.imgUrl}`) // 往图片追加根域名和'/'
                objs.value = result
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            loading.value = false
        })
}
</script>
<script>
export default {
    name: "GoodsListDetail",
}
</script>

<style lang="less" scoped>
video {
    width: 300px;
    height: 200px;
}
.od-one {
    display: flex;
    margin-bottom: @margin-mdl;
    .od-one__item {
        flex: none;
        width: 33.33%;
        p {
            width: 100%;
            margin-bottom: @margin-sm;
            font-size: @font-size-md;
            color: @gray-8;
            .price-icon {
                font-size: @font-size-sm;
            }
        }
    }
}
</style>
